<%--
  Created by IntelliJ IDEA.
  User: ravi
  Date: 8/3/12
  Time: 6:55 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--@elvariable id="actionBean" type="com.depo.quiggle.view.controller.ReceivableInvoiceAction"--%>
<%@ include file="/WEB-INF/jsp/include/taglibs.jsp" %>
<%@ page import="com.depo.quiggle.view.controller.QglLogDetailAccountingAction" %>
<%@ page import="com.depo.quiggle.view.controller.ReceivableInvoiceAction" %>

<stripes:form beanclass="com.depo.quiggle.view.controller.ReceivableInvoiceAction">
	<!-- <div id="invoice">
         <span class="" style="margin-left:87px"><b>Invoice # :</b> ${actionBean.invoice.invoiceId}	
         </span>
         <span class="f-r" id="curDate"></span>
     </div> -->
                      <div class="dashboard-content">
    <div class="qgl-pending-list">

      
				        
	<div class="table invoice-table" style="margin-left:87px;">
		
    	<div class="tr">
        <div class="td c1">            
            
            <div id="detailAccounting" style="display:none;">
            	<div class="qgl-pending-list">				
                                     
                   
                  <div class="job-row">
                    <div class="job-column actions">
                        <img alt="Edit" class="view edit-job job-action"  src="${pageContext.request.contextPath}/images/edit-icon.png" />
                        <span class="edit cancel-edit job-action" > Cancel</span>
                        <input class="edit job-action" type="submit" name="saveJobDtl"  value="save"  src="${pageContext.request.contextPath}/images/save.gif">
                    </div>
                    <div class="job-column status">
                       Status : <span class="view">${actionBean.invoice.job.status.description}</span>
                        <span  id="statusId${actionBean.invoice.job.jobId}"  class="edit">${actionBean.invoice.job.status.description}</span>
                    </div>
                  </div>
               </form>     
				</div> 
            </div>
            <div id="userAddrMultiple" style="display:none;">
             	<c:forEach items="${actionBean.invoice.resourceAddressList}" var="userAddress" varStatus="uLoop">
             	<c:if test="${uLoop.index != 0}">
             	
		            <stripes:hidden name="selectedAddress" id="addrsId${uLoop.index}" value="${userAddress.addressId}"></stripes:hidden>  
			
			    <stripes:radio id="${uLoop.index}" value="" name="user-address-radio" class="user-address-radio"/>
					<span class="bold">Address${uLoop.index}</span> 
					 <div id="userAddressId${uLoop.index}">  
					 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bold">${userAddress.userFirstName}</span><br>
                   	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${userAddress.address1} <c:if test="${userAddress.address1!=null}">, <BR /></c:if>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	${userAddress.address2} <BR />
                   	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<c:if test="${userAddress.address1!=null}"> ${userAddress.city}, </c:if> ${userAddress.state} ${userAddress.zip}<br><br>                   
                   	</div>
                   	</c:if>
        		</c:forEach>
        	</div>
        		
        	<div id="billPreview"></div>
            <div id="printInvoice">
           		<br class="clear" />
           		<div id="addressContainer" class="clear" style="width:200px;float:left;">
             		<address>
             		
             		<div id="selected-address"></div>
             		<b>${actionBean.invoice.userFirstName} ${actionBean.invoice.userLastName}</b>
             		<c:forEach items="${actionBean.invoice.resourceAddressList}" var="userAddress" varStatus="uLoop">
             		
             		<c:if test="${userAddress.addressId == actionBean.invoice.selectedAddressId}">  
					<stripes:hidden name="selectedAddress" id="selected-address_id" value="${userAddress.addressId}"></stripes:hidden>
					 <div id="resource-addresses-div">
					 <div id="userAddressId${uLoop.index}"> 
                   <stripes:hidden name="selectedAddress" id="addrsId${uLoop.index}" value='${userAddress.addressId}'></stripes:hidden>  
					<!-- <span class="bold">${userAddress.userFirstName}</span><br/> -->			
                   	<c:if test="${userAddress.address1!=null}"> ${userAddress.address1}  <BR /></c:if>
                   	<c:if test="${userAddress.address2!=null}"> ${userAddress.address2} <BR /> </c:if>
                   	<c:if test="${userAddress.address1!=null}"> ${userAddress.city}, </c:if> ${userAddress.state} ${userAddress.zip}<br><br>
                   	</div> 
                   	</div>
                   	</c:if>
        		   </c:forEach>
              			<!-- <h3>${userAddress.userFirstName} </h3> 
            				Suite 230 <br />
            				San Fransisco, CA 94105 -->
             		</address>
             		<address>
              			<span class="bold">${actionBean.invoice.billToAddress.userFirstName}</span><br/>	
               	  		${actionBean.invoice.billToAddress.address1}<c:if test="${actionBean.invoice.billToAddress.address2!=null}">, <BR /></c:if>
		            	${actionBean.invoice.billToAddress.address2} <BR />
		            	<c:if test="${actionBean.invoice.billToAddress.city!=null}"> ${actionBean.invoice.billToAddress.city}, </c:if> ${actionBean.invoice.billToAddress.state} ${actionBean.invoice.billToAddress.zip}
             		</address>
           		</div>
           		<div id="invoiceContainer">
           		
       
           			${actionBean.invoice.postDate}
           			<c:set var="invcId" value="${fn:split(actionBean.invoice.invoiceName, '-')}" />
           			<c:if test="${actionBean.toUserType == 2}">  
					   <p class="box"><label class="label">Invoice  #</label> ${invcId[1]}</p>		
					</c:if>
					<c:if test="${actionBean.toUserType != 2}">
					   <p class="box"><label class="label">Invoice  #</label>${actionBean.invoice.billToAddress.userFirstName} - ${invcId[1]}</p>
					</c:if>
					<p class="box"><label class="label">Job #</label>${actionBean.invoice.job.jobReference}</p>
					<p class="box"><label class="label">Date of Job</label>${actionBean.invoice.job.takenDateString}</p>
					<p class="box"><label class="label">Case Name</label>${actionBean.invoice.job.caseName}</p>
					<p class="box"><label class="label">Witness Name</label>${actionBean.invoice.job.witness}</p>
					<p class="box"><label class="label">Date Due</label>${actionBean.invoice.invoiceDueDate}</p>
      			</div>       		  
            
               	

            
           <div style="margin-top:10px;float:left;width:100%;background:#e5e5e5;padding:7px;border:1px solid #bbb"  >
            <table width="100%" border="0" cellspacing="0" cellpadding="0"  class="plainData">
                    
                  <tr>
                        <th align="left" valign="middle">DESCRIPTION TYPE</th>
                        <th align="left" valign="middle">QUANTITY</th>
                        <th align="left" valign="middle">ACTUAL</th>
                        <th align="left" valign="middle">RATE</th>
                        <th align="left" valign="middle">AMOUNT</th>
                      </tr>
                      <c:forEach items="${actionBean.invoice.invoiceItems}" var="invoiceItem">
                        <tr>
                        <td>${invoiceItem.description}</td>
                       <td>
	                         ${invoiceItem.quantity}                      
                         </td> 
                        <td>
                       
                         	 ${invoiceItem.units} 
                        </td>
                        <td>${invoiceItem.price}</td>
                        <td>${invoiceItem.amount}</td>
                      </tr>
                      </c:forEach>
                    
                      
                    </table>
                    
                    <div class="total">
                    
                    
                    <div class="due">
                   <p> <label class="bold label">Total Due : </label>
                     <fmt:formatNumber value=" ${actionBean.invoice.total}" type="currency"/>  </p>
                     <p> <label class="bold label">Payment : </label>
                    <fmt:formatNumber value=" ${actionBean.invoice.paidAmnt}" type="currency"/> </p>
                        <p style="border-top:1px solid #000;"> <label class="bold label">Balance Due : </label>
                         <c:if test="${actionBean.invoice.balance<0}">-</c:if>
                        <fmt:formatNumber value=" ${actionBean.invoice.balance}" type="currency"/> </p>
                     
                   
                    </div>
                    
            </div>
            </div> </div>
            <a name="apply" ></a>
           		<div id="applyPayment" style="clear:both;display:none;">
             		<h5 style="margin:0;padding:0;">Apply Payment</h5>
            		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="plainData">
		              <tr>
		                <th width="14%" align="left">INV #</th>
		                <th width="11%" align="left">A/R</th>
		                
		                <th width="22%" align="left"> <label for="receivedDate">RECEIVED DATE</label></th>
		                <th align="left">PAYMENT MODE </th>
		                <th width="31%" align="left"><label for="paymentRef">PAYMENT REFERENCE</label></th>
		                <th width="22%" align="left"><label for="amount">AMOUNT</label></th>
		              </tr>
					  <tr>
					    <td><span class="box"> ${actionBean.invoice.invoiceId}</span></td>
					    <td>${actionBean.invoice.billToAddress.userFirstName}</td>
					   
					    <td>
	            			<stripes:text id="receivedDate" name="invoice.paymentDtls.paymentDate"/>
					    </td>
					     <td>
					     	
            			</td>
					    <td>
					    	<stripes:text id="paymentRef" name="invoice.paymentDtls.paymentReference"/>					    
					    </td>
					    <td>
					    	<stripes:text id="amount" name="invoice.paymentDtls.amount"/>
					    </td>
					  </tr>
  					<tr>
    					<td colspan="5"><span style="height:50px">
      					<input type="button" class="button" value="Apply" onclick="callAjaxToApplyPaymentReceivable(${actionBean.invoice.invoiceId}, 'false', $('#paymentMode').val(),  $('#paymentRef').val(), $('#amount').val(),  $('#receivedDate').val(), ${actionBean.invoice.balance});"/>
      					<div class="buttonEnding"></div>
    					</span></td>
    				</tr>
            	</table>
            </div>
          
         </div>     
          <!--End of left panel -->
       
       </div>
</stripes:form>

<style>
#invoiceContainer {
    float: right;
    text-align: right;
    width: 70%;
}

#invoiceContainer .box {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    clear: both;
    float: right;
    font: 12px/20px Tahoma,trebuchet ms;
    margin-bottom: 3px;
    margin-top: 0;
    padding: 0;
    text-align: left;
    width: 270px;
}

#invoiceContainer .box .label {
    background: none repeat scroll 0 0 #F3F3F3;
    border-right: 1px solid #CCCCCC;
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100px;
}

.plainData {
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px solid #CCCCCC;
    font: 12px tahoma,Helvetica,sans-serif;
}

th {
    background: none repeat scroll 0 0 #EFEFEF;
    padding: 10px 5px;
}

.total .due {
    float: right;
    margin: 0 100px 0 0;
    padding: 0;
    text-align: right;
    width: 300px;
}

.plainData {
    font: 12px tahoma,Helvetica,sans-serif;
}

.total {
    font-size: 14px;
}

.total .label {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    text-align: right;
    width: 170px;
}

.bold {
    font-weight: bold;
}

address {
    color: #666666;
    font-size: 13px;
    font-style: normal;
    margin: 0;
    padding: 0;
}

.dashboard-content {
    background: none repeat scroll 0 0 #F9F9F9;
    border-radius: 5px 5px 5px 5px;
    font-size: 12px;
    padding: 15px;
}

#invoice {
    background: none repeat scroll 0 0 #999999;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    clear: both;
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    overflow: hidden;
    padding: 10px;
}
</style>
